<style>

    .background-block{
        padding: 30px;
    }
    .mini-block{
        padding: 50px 30px;
        background-color: white;
    }

    .image-block{
        width: 100%;
        height: 140px;
        background-color: white;
        background-repeat: no-repeat;
        -moz-background-size: contain;
        background-size: contain;
        background-position: center;
    }
    .image-list{
        height: 330px;
        overflow: scroll;
    }

    .image-body{
        height: 440px;
        overflow: scroll;
     }
    .image-title{
        position: relative;
        top: 85%;
        background-color: rgba(0,0,0,0.5);
        width: 100%;
        color: white;
        text-align: center;
    }

    .image-delete{
        position: relative;
        top:-20%;
        background-color: rgba(255,0,0,0.8);
        /*width: 100%;*/
        color: white;
        text-align: center;
        font-size: 30px;
        display: none;
    }

    .image-shade{
        position: relative;
        top:20%;
        width: 100%;
        text-align: center;
        color: #FFB800;
        display: none;
    }
    .submit-botton{
        width: 100%; margin: 0;
    }
    .layui-icon-ok-circle{
        font-size: 40px;
    }

</style>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->


<div class="layui-bg-gray background-block">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-panel ">
                <div class="mini-block">

                    <!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">-->
                        <!--<legend>图片选择</legend>-->
                    <!--</fieldset>-->

                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">本地</li>
                            <li>阿里云</li>
                            <li>七牛云</li>
                        </ul>
                    </div>
                    <!--搜索元素-->
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-row">
                            <div class="layui-col-xs8 layui-col-sm8 layui-col-md8">

                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">选择日期</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="date_time"  id="date_time" placeholder="[开始] - [结束]" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">文件名</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="keyword"  class="layui-input">
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <button type="button" class="layui-btn layui-btn-normal  layui-btn-sm"><i class="layui-icon layui-icon-search" ></i> 搜索</button>
                                    </div>
                                    <div class="layui-inline">
                                        <button type="button" class="layui-btn layui-btn-danger  layui-btn-sm">删除</button>
                                    </div>
                                    <div class="layui-inline">
                                        <button type="button" class="layui-btn layui-btn-warm  layui-btn-sm">移动</button>
                                    </div>
                                    <div class="layui-inline">
                                        <button type="button" class="layui-btn layui-btn-normal  layui-btn-sm"> 上传文件</button>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </form>


                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">文件分组</div>
                <div class="layui-card-body">
                    <!--树形下拉菜单-->
                    <div id="cate_list" class="demo-tree demo-tree-box image-body" ></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header">图片库</div>
                <div class="layui-card-body">
                    <!--文件列表-->
                    <div class="image-body" >

                        <div class="layui-row layui-col-space15 image-list">
                            <div class="layui-col-md3">
                                <div class="layui-panel image-block layui-bg-gray" style="background-image:url(https://oss.buwangyun.com/upload/20210410/3496a65c97610b40579762ac58d968bb.png);">
                                    <div class="image-title">xxxxx</div>
                                    <div class="image-delete"><i class="layui-icon layui-icon-delete">删除文件</i></div>
                                    <div class="image-shade" data-check="0"><i class="layui-icon layui-icon-ok-circle" >选中</i></div>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <div class="layui-panel image-block layui-bg-gray" style="background-image:url(https://oss.buwangyun.com/upload/20210410/3496a65c97610b40579762ac58d968bb.png);">
                                    <div class="image-title">xxxxx</div>
                                    <div class="image-delete"><i class="layui-icon layui-icon-delete">删除文件</i></div>
                                    <div class="image-shade" data-check="0"><i class="layui-icon layui-icon-ok-circle" >选中</i></div>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <div class="layui-panel image-block layui-bg-gray" style="background-image:url(https://oss.buwangyun.com/upload/20210410/3496a65c97610b40579762ac58d968bb.png);">
                                    <div class="image-title">xxxxx</div>
                                    <div class="image-delete"><i class="layui-icon layui-icon-delete">删除文件</i></div>
                                    <div class="image-shade" data-check="0"><i class="layui-icon layui-icon-ok-circle" >选中</i></div>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <div class="layui-panel image-block layui-bg-gray" style="background-image:url(https://oss.buwangyun.com/upload/20210410/3496a65c97610b40579762ac58d968bb.png);">
                                    <div class="image-title">xxxxx</div>
                                    <div class="image-delete"><i class="layui-icon layui-icon-delete">删除文件</i></div>
                                    <div class="image-shade" data-check="0"><i class="layui-icon layui-icon-ok-circle" >选中</i></div>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <div class="layui-panel image-block layui-bg-gray" style="background-image:url(https://oss.buwangyun.com/upload/20210410/3496a65c97610b40579762ac58d968bb.png);">
                                    <div class="image-title">xxxxx</div>
                                    <div class="image-delete"><i class="layui-icon layui-icon-delete">删除文件</i></div>
                                    <div class="image-shade" data-check="0"><i class="layui-icon layui-icon-ok-circle" >选中</i></div>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <div class="layui-panel image-block layui-bg-gray" style="background-image:url(https://oss.buwangyun.com/upload/20210410/3496a65c97610b40579762ac58d968bb.png);">
                                    <div class="image-title">xxxxx</div>
                                    <div class="image-delete"><i class="layui-icon layui-icon-delete">删除文件</i></div>
                                    <div class="image-shade" data-check="0"><i class="layui-icon layui-icon-ok-circle" >选中</i></div>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <div class="layui-panel image-block layui-bg-gray" style="background-image:url(https://oss.buwangyun.com/upload/20210410/3496a65c97610b40579762ac58d968bb.png);">
                                    <div class="image-title">xxxxx</div>
                                    <div class="image-delete"><i class="layui-icon layui-icon-delete">删除文件</i></div>
                                    <div class="image-shade" data-check="0"><i class="layui-icon layui-icon-ok-circle" >选中</i></div>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <div class="layui-panel image-block layui-bg-gray" style="background-image:url(https://oss.buwangyun.com/upload/20210410/3496a65c97610b40579762ac58d968bb.png);">
                                    <div class="image-title">xxxxx</div>
                                    <div class="image-delete"><i class="layui-icon layui-icon-delete">删除文件</i></div>
                                    <div class="image-shade" data-check="0"><i class="layui-icon layui-icon-ok-circle" >选中</i></div>
                                </div>
                            </div>


                        </div>
                        <!--分页样式-->
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-md12">
                                <div id="page"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-panel ">
                    <div class="submit-botton" >
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid">确定</button>
                    </div>
            </div>
        </div>
    </div>
</div>

